*{
    margin:0;
    padding: 0;
    box-sizing:border-box;
}
li{
    list-style: none;
}
@keyframes fadeInOut {
    0% {
        opacity:1;
     }
    25% {
        opacity:0;
    }
  50% {
      opacity: 0;
  }
    75% {
        opacity:1;
    }
   
}
  a{
      text-decoration:none;
      color:black;
    }


.body{  
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: "Microsoft Yahei";
    background: #888
}
.lay_bg_img{
    position:absolute;    
    animation-name: fadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 5s;
    animation-direction: alternate;
}
.lay_bg{
    position: relative;
    width: 100%;
    height: 100%; 

    
}
.lay_bg_img{  
    width: 100%;
    height: 100%; 
    position:fixed; 
}
.login{
    position: absolute;
    display: inline-block;
    width: 418px;
    height: 312px;
    transform: translate(-230%,50%);
     /* top: 35%; 
    left: 35%;  */
   background:rgba(105,105,105,0.4);
   text-align: center;
}
.login h1{
    padding: 20px;
    color:white;
    text-transform:uppercase;
    font-weight: 500;
}
.login input[type="text"],.login input[type="password"]{
    position: relative;
  border: 0;
    background: none;
    display:block;
    margin:10px auto;
    text-align: center; 
     border:2px solid rgb(119, 76, 76) ;
    padding: 14px 10px;
    width: 200px;
    outline: none;
    color:black;
    border-radius: 24px;
    transition: 0.25s;
    top: -30px;
}
.login input[type="text"]:hover,.login input[type="password"]:hover{
    width:280px;
    border-color: #2ecc71;
}
.login input[type="submit"]{
    position: relative;
    bottom: 20px;
	padding:5px;
	color:#FFF;
	width:100px;
	font-size:16px;
	border:none;
	border-radius:12px;
	cursor:pointer;
	transition:.5s;
	background-image:linear-gradient(to right,red,#09F,#0F3);
	background-size:200%;
    text-align: center;
}
.login input[type="submit"]:hover{
    background-position:right;
}
/* .item img{
position: absolute;
    top: 10px;
    left: 30px;
    width:24px;
   
} */
.item ,.item2{
     position: relative;
    font-family: 'icomoon';
    display: inline-block;
    width:700px;
    font-size: 20px;
    left: -220px;
    top: 20px;
    transition:width 0.25s ease 1s;}
.login .item:hover{
width:900px;
}
.clr ul li{
    float: left;
}
.clr ul li:nth-child(even) {
    width:1px;
    height: 12px;
    background-color:black;
    margin:6px 15px 0;
}
.clr{
    position: relative;
   left:135px;
   bottom: 5px;
}
